<template>
  <div id="mobtopbar-wrap">
    <div class="ec-wrapper">
      <div class="flex justify-between align-center" style="height: 100%">
        <div class="flex align-center">
          <div class="flex align-center pl-15">
            <!-- <img
              src="@assets/images/ec2-logo-th.png"
              height="28"
            /> -->
            <img src="@assets/images/logo.png" height="28" />
          </div>
        </div>

        <div class="flex align-center">
          <div class="user-drop mx-1">
            <el-dropdown @command="handleUserCommand">
              <span class="flex align-center">
                <el-icon class="m-right" :size="18" color="#303133">
                  <User />
                </el-icon>
                <!-- <span>朝花夕拾</span> -->
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item
                    >您好，{{ useLocale.userName }}</el-dropdown-item
                  >
                  <el-dropdown-item divided :icon="CircleCheck" command="quit"
                    >退出</el-dropdown-item
                  >
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
          <!-- <nut-icon
            :name="setIcon"
            size="16"
            color="#303133"
            class="mx-1"
            @click="handleSet"
          ></nut-icon> -->
          <nut-icon
            font-class-name="iconfont"
            class-prefix="icon"
            size="18"
            color="#303133"
            :name="setIcon"
             class="mx-1"
            @click="handleSet"
          ></nut-icon>
          <nut-icon
            font-class-name="iconfont"
            class-prefix="icon"
            size="18"
            name="caidan3"
            class="ml-1 mr-15 menuBtnColor"
            @click="drawer = true"
          ></nut-icon>
        </div>
      </div>
    </div>
    <div class="full-screen" v-if="showSet">
      <div class="full-screen-item">
        <router-link
          to="/login"
          class="is-menu-link flex justify-between align-center"
        >
          <div>
            机器人有效期：2026-07-03 <br />
            直播有效期：2024-02-12 23:59:59
          </div>
          <div>
            <span class="desc">续费</span>
            <el-icon class="el-color-picker__icon">
              <arrow-right />
            </el-icon>
          </div>
        </router-link>
      </div>

      <div class="full-screen-item">
        <router-link to="/login" class="is-menu-link flex justify-between">
          <div>邮箱</div>
          <div>
            <el-icon class="el-color-picker__icon">
              <arrow-right />
            </el-icon>
          </div>
        </router-link>
      </div>
      <div class="full-screen-item">
        <div
          @click="
            () => {
              showLang = true;
            }
          "
          class="is-menu-link flex justify-between"
        >
          <div>语言</div>
          <div>
            <span class="desc">{{ currentLan }}</span>
            <el-icon class="el-color-picker__icon">
              <arrow-right />
            </el-icon>
          </div>
        </div>
      </div>
      <div class="full-screen-item">
        <div class="is-menu-link flex justify-between">
          <div>皮肤</div>
          <div class="user-skin">
            <el-dropdown @command="handleCommandSkin">
              <div class="wrap">
                <div class="inner">
                  <el-icon class="el-color-picker__icon">
                    <arrow-down />
                  </el-icon>
                </div>
              </div>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="default">
                    <div style="background: #8dbe4a; width: 28px; height: 28px">
                      &nbsp;
                    </div>
                  </el-dropdown-item>
                  <el-dropdown-item command="ec2-orange">
                    <div style="background: #d99759; width: 28px; height: 28px">
                      &nbsp;
                    </div>
                  </el-dropdown-item>
                  <el-dropdown-item command="ec2-purple">
                    <div style="background: #62359a; width: 28px; height: 28px">
                      &nbsp;
                    </div>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
      </div>
    </div>
    <nut-picker
      v-model="currentLanVal"
      v-model:visible="showLang"
      :columns="langs"
      @confirm="confirm"
    >
    </nut-picker>
    <el-drawer class="asideDraw" v-model="drawer" direction="ltr" size="80%">
      <side-bar></side-bar>
    </el-drawer>
  </div>
</template>
<script lang="ts" setup>
import {
  Message,
  ArrowDown,
  CircleCheck,
  User,
  Setting,
  ArrowRight,
} from "@element-plus/icons-vue";
import { ref } from "vue";
import { langs } from "@/locales";
import { useLocaleStore } from "@/store/locales";
import router from "@/router";
const useLocale = useLocaleStore();

let langkey = useLocale.locale;
let showLang = ref(false);
let showSet = ref(false);
let setIcon = ref("shezhi1");
let currentLan = ref("");
let currentLanVal = ref([langkey]);
let drawer = ref(false);
console.log(langkey);
currentLan.value = langs.find((cur) => cur.value === langkey)?.text || "";
console.log(currentLan);
document.getElementsByTagName("body")[0].className = useLocale.theme;
const confirm = ({ selectedValue, selectedOptions }) => {
  currentLan.value = selectedOptions[0].text;
  useLocale.setLocale(selectedValue.join(","));
};

function handleCommandSkin(command: string) {
  console.log(command);
  useLocale.setTheme(command);
  document.getElementsByTagName("body")[0].className = command;
}
function handleSet() {
  showSet.value = !showSet.value;
  if (showSet.value == true) {
    setIcon.value = "guanbi";
  } else {
    setIcon.value = "shezhi1";
  }
  console.log(showSet.value);
}
function handleUserCommand(command: string) {
  console.log(command);
  if (command == "quit") {
    router.push("/login");
  }
}
</script>
<style>
.asideDraw {
  .el-drawer__header {
    margin-bottom: 0;
  }
}
</style>
<style lang="scss" scoped>
#mobtopbar-wrap {
  background-color: #fff;
  padding: 0;
  position: fixed;
  z-index: 99;
  width: 100%;
  top: 0;
  left: 0;
  height: 55px;
  border-bottom: 1px solid var(--el-border-color);

  > div {
    height: 100%;
  }
  .menuBtnColor {
    color: var(--el-color-primary);
  }
  .email {
    :hover {
      color: var(--el-color-primary);
    }
  }

  .user-drop {
    cursor: pointer;
    // color: var(--el-color-primary);
  }

  .el-link {
    font-weight: normal;
    font-size: 14px;
  }

  .user-skin {
    .wrap {
      display: flex;
      justify-content: center;
      align-items: center;
      box-sizing: border-box;
      height: 28px;
      width: 28px;
      padding: 4px;
      border: 1px solid var(--el-border-color);
      border-radius: 4px;
      cursor: pointer;
    }

    .inner {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
      background-color: var(--el-color-primary);

      .el-color-picker__icon {
        color: #fff;
      }
    }
  }

  .m-right {
    margin-right: 2px;
  }

  .m-left {
    margin-left: 2px;
  }
}
.full-screen {
  position: fixed;
  top: 57px;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 0 32px;
  background-color: #fff;
  transition: background-color 0.5s;
  overflow-y: auto;
  .nut-cell {
    border-bottom: 1px solid var(--el-border-color);
    box-shadow: none;
    font-size: 13px;
    font-weight: 500;
    color: var(--el-text-color-primary);
  }
  .full-screen-item {
    padding: 12px 0;
    border-bottom: 1px solid var(--el-border-color);
  }
  .desc {
    color: var(--el-color-primary);
  }
  .is-menu-link {
    display: block;
    font-size: 13px;
    font-weight: 500;
    line-height: 24px;
    text-decoration: none;
    color: var(--el-text-color-primary);
    transition: color var(--el-transition-duration);
  }
}
</style>
